<template>
<div class="index_view">
    <div class="head">
        <div class="container">
            <div class="left">
                上海冬安 |
                <span>
                    实验室管理系统
                </span>
            </div>
            <div class="right">
                <div class="item" @click="back_top(100)">
                    首页
                </div>
                <div class="item" @click="on_item(1)">
                    产品特点
                </div>
                <div class="item" @click="on_item(7)">
                    增值服务
                </div>
                <div class="item" @click="on_item(8)">
                    核心团队
                </div>
                <div class="item" @click="on_item(9)">
                    服务行业
                </div>
                <div class="item" @click="on_item(10)">
                    联系我们
                </div>
                <div class="item bt">
                    马上试用
                </div>
            </div>
        </div>
    </div>
    <div style="width:100%;height:85px;"></div>
    <div class="content">
        <div class="banner">
            <div class="text">
                <div class="title">
                    东岸实验室管理运营平台
                </div>
                <div class="content">
                    <span>60天</span>
                    定制胡急速上线<br>
                    低于市场均价
                    <span>50%</span>
                    以上
                </div>
                <div class="bt">
                    马上试用
                </div>
            </div>
        </div>
        <One
            :back_top="item_index==1">
        </One>
        <Two
            :back_top="item_index==2">
        </Two>
        <Three
            :back_top="item_index==3">
        </Three>
        <Four
            :back_top="item_index==4">
        </Four>
        <Five
            :back_top="item_index==5">
        </Five>
        <Six
            :back_top="item_index==6">
        </Six>
        <Seven
            :back_top="item_index==7">
        </Seven>
        <Eight
            :back_top="item_index==8">
        </Eight>
        <Nine
            :back_top="item_index==9">
        </Nine>
        <Ten
            :back_top="item_index==10">
        </Ten>
    </div>
    <Footer ref="footer"></Footer>
    <div 
        class="back_top"
        @click="back_top(200)">
        <i class="el-icon-top"></i>
    </div>
</div>
</template>

<script>
import One from '@/components/one.vue'
import Two from '@/components/two.vue'
import Three from '@/components/three.vue'
import Four from '@/components/four.vue'
import Five from '@/components/five.vue'
import Six from '@/components/six.vue'
import Seven from '@/components/seven.vue'
import Eight from '@/components/eight.vue'
import Nine from '@/components/nine.vue'
import Ten from '@/components/ten.vue'
import Footer from '@/components/footer.vue'
import {start_to_end} from '@/assets/tools/public_tools';
export default {  //首页界面
    name: 'Index_view',
    components: {
        One,
        Two,
        Three,
        Four,
        Five,
        Six,
        Seven,
        Eight,
        Nine,
        Ten,
        Footer,
    },
    data(){
        return{
            item_index:0,
        };
    },
    methods:{
        back_top(time = 100){   //回到顶部
            start_to_end(
                document.body.scrollTop || document.documentElement.scrollTop,
                0,
                time,
            );
            let timer  = null;
            cancelAnimationFrame(timer);
            //获取当前毫秒数
            let startTime = +new Date();     
            //获取当前页面的滚动高度
            let b = document.body.scrollTop || document.documentElement.scrollTop;
            let d = time;
            let c = b;
            timer = requestAnimationFrame(function func(){
                let t = d - Math.max(0,startTime - (+new Date()) + d);
                document.documentElement.scrollTop = document.body.scrollTop = t * (-c) / d + b;
                timer = requestAnimationFrame(func);
                if(t == d){
                    cancelAnimationFrame(timer);
                }
            });
        },
        on_item(index){
            this.item_index = index;
            this.$nextTick(()=>{  //防止数字相等不会触发监听
                this.item_index= 0;
            });
        },
    },
}
</script>

<style lang="scss" scoped>
.index_view {
    width: 100%;
    >.head{
        width: 100%;
        height: 85px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        box-shadow: 0 2px 2px rgba(55,193,134,.24), 0 0 2px rgba(10,16,20,.12);
        z-index: 999;
        background-color: white;
        >.container{
            max-width: 1100px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 100%;
            >.left{
                display: flex;
                justify-content: flex-start;
                align-items: center;
                line-height: 100%;
                height: fit-content;
                font-size: 25px;
                font-weight: bold;
                >span{
                    margin-left: 10px;
                    font-size: 16px;
                    font-weight: 500;
                }
            }
            >.right{
                display: flex;
                justify-content: flex-end;
                align-items: center;
                >.item{
                    margin-left: 30px;
                    color: #172738;
                    font-size: 16px;
                    cursor: pointer;
                }
                >.bt{
                    background-color: #37c186;
                    color: #fff;
                    padding: 10px 15px;
                    border-radius: 20px;
                    cursor: pointer;
                }
            }
        }
    }
    >.content{
        width: 100%;
        display: grid;
        grid-gap: 70px;
        >.banner{
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height: 710px;
            width: 100%;
            position: relative;
            background-position: 50%;
            background-size: cover;
            background-image: url(../assets/photo/banner.jpg);
            >.text{
                margin: 0 auto;
                max-width: 1100px;
                width: 100%;
                height: 710px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                text-align: left;
                >div{
                    color: white;
                }
                >.title{
                    font-size: 48px;
                    font-weight: 600;
                }
                >.content{
                    margin-top: 60px;
                    font-size: 24px;
                    color: #fff;
                    margin-bottom: 80px;
                    line-height: 60px;
                    >span{
                        font-size: 32px;
                        margin-right: 8px;
                    }
                }
                >.bt{
                    width: 160px;
                    height: 60px;
                    font-size: 20px;
                    background: #37c186;
                    -webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,.5);
                    box-shadow: 0 2px 8px 0 rgba(0,0,0,.5);
                    border-radius: 30px;
                    color: #fff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                }
            }
        }
    }
    >.back_top{
        width: fit-content;
        height: fit-content;
        position: fixed;
        bottom: 60px;
        right: 60px;
        width: 50px;
        height: 50px;
        font-size: 25px;
        background-color: cadetblue;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        cursor: pointer;
        background-image: linear-gradient(-225deg, #D4FFEC 0%, #57F2CC 48%, #4596FB 100%);
        i{
            font-weight: bold;
        }
    }
}
</style>

